<template>
  <div class="common-layout">
    <el-container>
      <div class="logo-class">
        <div class="logo-large" v-if="!collapse">
          <el-image style="width: 200px; height: 70px" :src="require('@/assets/img/bdefault.jpg')"></el-image>
        </div>
        <div class="logo-small" v-else>
          <el-image style="width: 30px; height: 30px" :src="require('@/assets/img/bdefault.jpg')"></el-image>
        </div>
      </div>
      <el-aside :width="collapse ? '64px' : '200px'">
        <yu-aside></yu-aside>
      </el-aside>
      <el-container>
        <el-header>
          <yu-header></yu-header>
        </el-header>
        <el-main> <router-view> </router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
  import YuHeader from './YuHeader.vue';
  import YuAside from './YuAside.vue';
  import { reactive, computed, toRefs, onMounted, getCurrentInstance } from 'vue';
  const { proxy } = getCurrentInstance();
  const collapse = computed(() => {
    return proxy.$store.getters.getCollapse;
  });
</script>
<style lang="scss" scoped>
  .el-main {
    height: 90vh;
    overflow-y: auto;
  }
  .el-header {
    height: 70px;
  }
  .logo-class {
    height: 70px;
    position: absolute;
    .logo-small {
      padding: 50%;
    }
  }
  .el-aside {
    padding-top: 70px;
  }
</style>
